<template>
  <div class="app-item" ref="appRef">
    <div class="icon">
      <a :href="'http://' + webUrl" target="_blank">
        <img :src="icon" :alt="webName" v-if="hasIcon" />
        <div v-else :style="{ backgroundColor: '#ccc' }" class="word-icon">
          <div class="text">标题</div>
        </div>
      </a>
    </div>
    <div class="title">{{ webName ? webName : '知乎' }}</div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import AppCard from './cpns/card/AppCard.vue'
const props = defineProps({
  id: Number,
  webUrl: String,
  webName: String,
  icon: String,
})
const cardpos = ref({ posX: 0, posY: 0 })
const emit = defineEmits(['editEvent'])
const appRef = ref(null)

const hasIcon = props.icon ? ref(true) : ref(false)
</script>

<style scoped>
.app-item {
  display: inline-block;
  width: 96px;
  height: 96px;
  border: 1px dashed;
}
.icon {
  width: 66px;
  height: 66px;
  margin: 0 auto;
}
.icon img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  box-shadow: 0 0 5px #0000001a;
  transition: 0.2s;
}
.icon img:hover {
  box-shadow: 0 0 10px #0000004d;
}
.title {
  margin-top: 5px;
  font-size: 12px;
  color: black;
}
.word-icon {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  text-align: center;
  line-height: 65px;
}
.text {
  display: inline-block;
  height: auto;
  line-height: 1.6;
  color: #fff;
  vertical-align: middle;
}
</style>
